<template>
	<div class="storeinformationstyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<p style="color: #323233; font-size: 14px">背景图片</p>
				<div style="height: 10px"></div>
				<p style="color: #969799; font-size: 12px">建议尺寸：750x370 像素，尺寸不匹配时，图片将被压缩或拉伸以铺满画面</p>

				<div style="height: 10px"></div>
				<!-- 背景图 -->
				<div class="backgroundImg" @click="uploadI('bakcgroundImg')">
					<img draggable="false" v-if="!datas.bakcgroundImg" :src="BACKIMG_PNG" alt="" />
					<img draggable="false" v-else :src="datas.bakcgroundImg" alt="" />
					<p>更换图片</p>
				</div>

				<div style="height: 20px"></div>
				<p style="color: #323233; font-size: 14px">店铺头像</p>

				<div style="height: 10px"></div>
				<!-- 店铺头像 -->
				<div class="backgroundImg" @click="uploadI('headPortrait')">
					<img draggable="false" v-if="!datas.headPortrait" :src="BACKIMG_PNG" alt="" />
					<img draggable="false" v-else :src="datas.headPortrait" alt="" />
					<p>更换图片</p>
				</div>

				<div style="margin: 20px 0; height: 1px; background: rgb(235, 237, 240)"></div>

				<!-- 表单 -->
				<el-form label-width="80px" :model="datas" size="small" :rules="rules">
					<!-- 标题内容 -->
					<el-form-item label="选择模板" class="lef"> </el-form-item>

					<!-- 商品样式选择 -->
					<el-radio-group v-model="datas.rubiksCubeType" class="select-sp">
						<el-radio style="margin-top: 10px; margin-right: 10px" :label="item.type" v-for="(item, index) in rubiksCubeTypes" :key="index">{{
							item.content
						}}</el-radio>
					</el-radio-group>

					<div style="height: 30px"></div>

					<!-- 店铺名称 -->
					<el-form-item label="店铺名称" class="lef" prop="name">
						<el-input v-model="datas.name" placeholder="请填写店铺名称" maxlength="20"></el-input>
					</el-form-item>

					<!-- 店铺名称 -->
					<el-form-item label="优惠信息" class="lef">
						<el-input v-model="datas.Discount" placeholder="请填写优惠信息也可不填" maxlength="45"></el-input>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>

		<!-- 上传图片 -->
	</div>
</template>

<script>
import BACKIMG_PNG from '/@/assets/decoration/images/backimg.png';
export default {
	name: 'storeinformationstyle',
	props: {
		datas: Object,
	},
	data() {
		return {
			danqian: '', //当前选中的是背景还是头像
			rules: {
				name: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }],
			},
			rubiksCubeTypes: [
				{
					type: 0,
					content: '样式一',
				},
				{
					type: 1,
					content: '样式二',
				},
				{
					type: 2,
					content: '样式三',
				},
				{
					type: 3,
					content: '样式四',
				},
				{
					type: 4,
					content: '样式五',
				},
			],
		};
	},
	methods: {
		/* 上传图片 */
		uploadI(res) {
			this.danqian = res;
			this.$refs.upload.showUpload();
		},
		// 提交
		uploadInformation(res) {
			this.datas[this.danqian] = res;
			this.$emit('refreshScroll');
		},
	},
	mounted() {
		this.$emit('refreshScroll');
		console.log('data： ', this.datas);
	},
};
</script>

<style scoped lang="scss">
.storeinformationstyle {
	width: 100%;
	// position: absolute;
	// left: 0;
	// top: 0;
	padding: 0 10px 20px;
	box-sizing: border-box;
	/* 标题 */
	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}
	/* 背景图 */
	.backgroundImg {
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		width: 60px;
		height: 60px;
		position: relative;
		background: #f2f4f6;

		img {
			width: 100%;
			height: auto;
		}

		p {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 20px;
			font-size: 12px;
			color: #fff;
			background: rgba(0, 0, 0, 0.5);
			text-align: center;
			line-height: 20px;
		}
	}

	.lef {
		:deep(.el-form-item__label) {
			text-align: left;
		}
	}
	.select-sp {
		display: flex;
		flex-wrap: wrap;
	}
}

.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}
</style>
